<template>
	<view>
		<view class="pad-30">
			<view class="centerY">
				<view class="border betweenX" @click="isRadius = true">
					<view class="color-646464 font-26">{{radiusVal}}</view>
					<up-icon name="arrow-down" size="24rpx"></up-icon>
				</view>
				<view class="border betweenX mar-left-30" @tap="showTree">
					<view class="color-646464 font-26">{{workVal}}</view>
					<up-icon name="arrow-down" size="24rpx"></up-icon>
				</view>
			</view>

			<view class="centerY mar-top-30">
				<view class="radio-box">
					<up-radio-group v-model="formData.gender" @change="groupChange">
						<up-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in genderList" :key="index"
							:label="item.name" :name="item.val">
						</up-radio>
					</up-radio-group>
				</view>

				<view>
					<up-input type="number" @confirm="hanldeSearch" clearable placeholderClass="input-style"
						placeholder="搜索工人名称" v-model="formData.s_name"></up-input>
				</view>

			</view>
		</view>
		<view class="container pad-30">
			<view v-for="(item, index) in workerList" :key="index" @click="hanldeworkerInfo(item.id)"
				class="centerY bg-white radius16 mar-bottom-30 pad-30 ">
				<view class="centerXY mar-left-10 flex-w betweenX">
					<view class="centerXY flex-w">
						<image class="image" :src="item.avatar" mode="aspectFill"></image>
						<view class="font-30 mar-left-20 flex-w">
							<view class="betweenX">
								<view class="color-text">{{item.name}}</view>
								<view class="centerXY font-28 range-right">
									<image class="range" src="@/static/image/range.png" mode="">
									</image>
									<view>距离<text class="color-primary">{{item.dist}}</text>km
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="centerXY mar-top-100 font-26 color-646464" v-if="workerList.length == 0">没有找到匹配的工人，选择其它时间试试
			</view>
		</view>

		<tki-tree ref="tkitree" :selectParent="false" :multiple="false" :range="categoryList" :foldAll="false"
			rangeKey="name" @confirm="treeConfirm" @cancel="treeCancel"></tki-tree>

		<up-picker :show="isRadius" keyName="name" @cancel="isRadius = false" @confirm="hanldeConfirmRadius"
			:columns="columns"></up-picker>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
	import { dataReportFun } from '@/util/dataReport.js';
	import { workAll, pageListNearbyV2 } from '@/api/index.js';
	import util from '@/util/share.js';
	const radiusVal = ref('请选择距离');
	const workVal = ref("请选择工种");
	const isRadius = ref(false);
	const worker_ids = ref([]);
	const lat = ref('');
	const lgt = ref('');
	const workerList = ref([]);
	let formData = reactive({
		radius: '',
		gender: '',
		work_id: '',
		s_name: '',
	})
	// 公里数据
	const columns = reactive([
		[{ name: '10km', val: 10 }, { name: '15km', val: 15 }, { name: '20km', val: 20 }, {
			name: '30km',
			val: 30
		}]
	]);
	// 性别数据
	const genderList = reactive([{ name: '全部', val: '' }, { name: '男', val: 1 }, { name: '女', val: 2 }]);
	// 树形数据
	const categoryList = ref([]);
	const list = ref([]);
	const tkitree = ref(null);
	// 确认选中
	const treeConfirm = (e) => {
		formData.work_id = e[0].id;
		workVal.value = e[0].name;
		getPageListNearby();
	}

	// 公里选择确认
	const hanldeConfirmRadius = (e) => {
		formData.radius = e.value[0].val;
		radiusVal.value = e.value[0].name;
		isRadius.value = false;
		getPageListNearby();
	}

	// 打开树形多选 
	const showTree = () => {
		tkitree.value._show();
	}

	// 关闭树形多选
	const treeCancel = () => {
		tkitree.value._hide();
	}

	// 获取树形
	const getTreeList = async () => {
		let res = await workAll();
		categoryList.value = res.data.tree;
	}

	// 文字搜索
	const hanldeSearch = () => {
		getPageListNearby();
	}

	const groupChange = (e) => {
		getPageListNearby();
	}

	const getPageListNearby = () => {
		let data = {
			...formData,
			lat: lat.value,
			lgt: lgt.value,
			except_worker_ids: worker_ids.value,
			ps: 50
		}

		pageListNearbyV2(data).then(res => {
			if (res?.code == 200) {
				workerList.value = res?.data?.lists;
				worker_ids.value = res?.data?.except_worker_ids;
			}
		})
	}
	// 查看工人详情
	const hanldeworkerInfo = (id) => {
		uni.navigateTo({
			url: '/pages/worker/detail?worker_id=' + id
		})
	}

	onLoad((option) => {
		if (option) {
			getTreeList();
			handleChooseLocation();
		}
		dataReportFun({
			event: "client.page_view",
		})
	});

	// 分享
	onShareAppMessage(() => {
		return util.onShare({
			path: `/pages/homeService/homeService?code=${props.value.code}`
		})
	})

	// 获取地址
	const handleChooseLocation = () => {
		uni.getSetting({
			success(res) {
				if (!res.authSetting['scope.userLocation']) {
					// 位置权限未授权，发起授权请求
					uni.authorize({
						scope: 'scope.userLocation',
						success() {
							// 用户已授权，可以直接调用uni.getLocation获取位置
							uni.getLocation({
								type: 'gcj02', // 使用 'wgs84' 坐标系
								success: function(res) {
									// 成功获取定位信息
									const {
										latitude,
										longitude
									} = res;
									lgt.value = longitude + '';
									lat.value = latitude + '';
									getPageListNearby();
								}
							});
						},
						fail() {
							// 用户拒绝授权，需要引导用户到设置中开启
							uni.showModal({
								title: '提示',
								content: '此功能需要获取您的地理位置，请确认授权',
								success: function(modalRes) {
									if (modalRes.confirm) {
										// 引导用户到设置中去改变权限
										uni.openSetting();
									}
								}
							});
						}
					});
				} else {
					uni.getLocation({
						type: 'gcj02', // 使用 'wgs84' 坐标系
						success: (res) => {
							// 成功获取定位信息
							const {
								latitude,
								longitude
							} = res;
							lgt.value = longitude + '';
							lat.value = latitude + '';
							getPageListNearby();
						},
						fail: (err) => {
							// 处理失败情况
							console.error('获取定位失败:', err);
							if (err.errCode == 1) {
								uni.$u.toast('获取定位失败，检查设备的定位服务是否开启，并确保应用有权限使用定位服务');
							} else if (err.errCode == 2) {
								uni.$u.toast('获取定位失败，在设备的设置中打开定位权限');
							} else {
								uni.$u.toast('获取定位失败，检查设备的定位是否打开定位权限');
							}
						}
					});

				}
			}
		})
	}
</script>

<style scoped lang="scss">
	.container {
		background: #F5F6F7;
	}
	
	.radio-box{
		width: 360rpx;
		flex-shrink: 0;
	}

	.border {
		width: 240px;
		border: 1rpx solid #D5D5D5;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 6rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.scroll-y {
		height: calc(100vh);
	}

	.buttom {
		border-top: 2rpx solid #f2f2f2;
		margin-top: 24rpx;
	}

	.checkbox-border {
		border: 2rpx solid rgb(200, 201, 204);
		box-sizing: border-box;
		height: 32rpx;
		width: 32rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.image {
		display: block;
		width: 100rpx;
		height: 100rpx;
		max-width: 100rpx;
		border-radius: 50%;
	}

	.button-bottom {
		width: 100%;
		padding: 35rpx 40rpx;
		box-sizing: border-box;
		background: white;
		// position: fixed;
		// bottom: 0rpx;
		// left: 0rpx;
		z-index: 2;
	}

	.btn {
		width: 100%;
		height: 100rpx;
		border-radius: 50rpx;
		border: 2rpx solid #C1C1C1;
		line-height: 100rpx;
		text-align: center;
	}

	.range {
		width: 20rpx;
		height: 25rpx;
		margin-right: 10rpx;
	}

	.medal {
		width: 26rpx;
		height: 21rpx;
		display: block;
	}

	.bg-gold {
		background: linear-gradient(90deg, #FEF2E7 0%, #EECBAE 100%);
		border-radius: 25rpx;
		color: #785940;
		padding: 5rpx 15rpx;
	}

	.bg-silver {
		background: linear-gradient(135deg, #ECECEC 0%, #CCCCCC 100%);
		border-radius: 25rpx;
		color: #444444;
		padding: 5rpx 15rpx;
	}

	.bg-high {
		background: rgba(0, 85, 254, 0.1);
		border-radius: 25rpx;
		color: $uni-color-primary;
		padding: 5rpx 15rpx;
	}

	.range-right {
		flex-shrink: 0;
	}

	:deep(.u-checkbox) {
		width: 100%;
	}

	.button-bottom {
		width: 100%;
		padding: 35rpx 40rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: 0rpx;
		z-index: 2;
	}

	.select {
		color: #ABA9B4;
	}
</style>